<template>
  <div
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-hidden="true"
    :id="id"
  >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <slot name="title"> 部门差旅审批人 </slot>
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <form role="form" class="form-horizontal">
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 企业 </label>
              <div class="col-9">
                {{ customerName }}
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 部门 </label>
              <div class="col-9">
                {{ departmentName }}
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 角色 </label>
              <div class="col-9">
                <div class="form-check form-check-inline">
                  <input
                    class="form-check-input"
                    type="radio"
                    value="10"
                    v-model.number="roleType"
                  />
                  <label class="form-check-label">部门经理</label>
                </div>
                <div class="form-check form-check-inline">
                  <input
                    class="form-check-input"
                    type="radio"
                    value="20"
                    v-model.number="roleType"
                  />
                  <label class="form-check-label">部门差旅审批人</label>
                </div>
              </div>
            </div>
            <div class="row">
              <table class="table table-sm">
                <thead>
                  <tr>
                    <th>登录用户名</th>
                    <th>姓名</th>
                    <th>部门</th>
                    <th>职位</th>
                    <th>状态</th>
                    <th>单选</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="info of userInfos">
                    <td>
                      {{ info.username }}
                    </td>
                    <td>{{ info.empname }}</td>
                    <td>{{ info.departmentName }}</td>
                    <td>{{ info.positionName }}</td>
                    <td>
                      {{ info.status }}
                    </td>
                    <td>
                      <div class="form-check form-check-inline">
                        <input
                          class="form-check-input"
                          type="radio"
                          :value="info.id"
                          v-model.number="userId"
                        />
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary me-2"
            data-bs-dismiss="modal"
          >
            关闭
          </button>
          <button
            type="button"
            class="btn btn-primary"
            @click.stop="save($event.target)"
          >
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
// import moment from 'moment'
import { saveCustomerApprover } from "@/api/customer.js";
import { searchCustomerLoginInfos } from "@/api/customer.js";

export default {
  props: {
    id: {
      type: String,
      default: "modalPrompt",
    },
  },
  data() {
    return {
      resolve: "",
      reject: "",
      promise: "",

      customerId: 0,
      customerName: "",
      departmentId: 0,
      departmentName: "",
      userId: 0,
      roleType: 20,

      userInfos: [],

      myModal: null,
    };
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    ok: function (v) {
      this.hideModal();
      this.resolve(v);
    },
    save: function (btn) {
      $(btn).attr("disabled", true);
      const params = {
        userId: this.userId,
        roleType: this.roleType,
      };

      saveCustomerApprover(
        this.customerId,
        this.departmentId,
        params,
        (v) => {
          if (v.status !== "OK") {
            this.showErrMsg(v.errmsg, "danger");
          } else {
            this.showErrMsg("操作成功");
            this.ok(v);
          }
        },
        () => {
          $(btn).attr("disabled", false);
        }
      );
    },
    reset: function () {
      this.customerId = 0;
      this.customerName = "";
      this.departmentId = 0;
      this.departmentName = "";
    },
    modal: function (info) {
      this.reset();

      this.customerName = info.customerName;
      this.customerId = info.customerId;

      this.departmentId = info.id;
      this.departmentName = info.name;

      this.search();

      this.showModal();

      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      return this.promise;
    },
    search: function () {
      const params = {
        "sc.pageNo": 1,
        "sc.pageSize": 100,
      };
      searchCustomerLoginInfos(this.customerId, params, (v) => {
        this.userInfos = v.dataList;
      });
    },
    showModal: function () {
      this.getMyModal().show();
    },
    hideModal: function () {
      this.getMyModal().hide();
    },
    getMyModal: function () {
      if (this.myModal === null) {
        let myModalEl = $(this.$el).get(0);
        this.myModal = new bootstrap.Modal(myModalEl);
      }

      return this.myModal;
    },
  },
};
</script>
